<template>
    <div class="post-detail-page">
        <ModalIndex title="删除文章" :visible="visible" @model-on-close="onClose" @model-on-confirm="onConfirm">
            <p>确认要删除文章吗</p>
        </ModalIndex>
        <article class="w-75 mx-auto mb-5 pb-3" v-if="currentPost">
            <img :src="currentImageUrl" class="rounded-lg img-fluid my-4" alt="currentPost.title" v-if="currentImageUrl">

            <h2 class="mb-4">{{ currentPost.title }}</h2>
            <hr>
            <div class="user-profile-component bored-top bored-bottom py-3 mb-5 align-items-center row g0">
                <div class="col">
                    <PostProFile :user="currentPost.author" v-if="typeof currentPost.author === 'object'"></PostProFile>
                </div>
                <span class="text-muted col text-right font-italic">{{ currentPost.createdAt }}</span>
            </div>
            <hr>
            <div v-html="currentHTML"></div>

            <div class="btn-group mt-5" v-if="showEditArea">
                <router-link type="button" class="btn btn btn-success"
                    :to="{ name: 'create', query: { id: currentPost._id } }">
                    编辑</router-link>

                <button type="button" class="btn btn-danger ml-0" @click="deletefetch">删除</button>
            </div>
            <!--  
            -->

        </article>
    </div>
</template>

<script lang="ts">

import { defineComponent, computed, onMounted, ref } from 'vue'
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import MarkdownIt from 'markdown-it'
import PostProFile from '@/components/PostProFile.vue';
import { GolbalDataProps, ResponseType, ImagePrpos, Userprops, PostProps } from '@/store';

import ModalIndex from '@/components/ModalIndex.vue';
import createMessage from '@/hooks/createMessage';
import router from '@/router';


export default defineComponent({
    components: {
        PostProFile,
        ModalIndex
    },
    setup() {
        const visible = ref(false)
        const route = useRoute()
        const store = useStore<GolbalDataProps>()
        const md = new MarkdownIt()
        const currenId = route.params.id


        onMounted(() => {
            store.dispatch('fetchPost', currenId)
        })
        const currentPost = computed(() => store.getters.getDetailById(currenId))

        // eslint-disable-next-line vue/return-in-computed-property
        const currentHTML = computed(() => {
            const { content } = currentPost.value
            if (currentPost.value && content) {
                return md.render(content)
            } else {
                return null
            }
        })

        const currentImageUrl = computed(() => {
            if (currentPost.value && currentPost.value.image) {
                const { image } = currentPost.value
                return (image as ImagePrpos).url
            } else {
                return null
            }
        })


        // 是否显示编辑区域
        // 判断登录的id是否和文章作者的id相等
        const showEditArea = computed(() => {
            const { isLogin, _id } = store.state.user
            if (currentPost.value && currentPost.value.author && isLogin) {
                const postAuthor = currentPost.value.author as Userprops
                return postAuthor._id === _id
            } else {
                return false
            }
        })

        // 删除文章
        const deletefetch = () => {
            visible.value = true
        }
        // 删除取消
        const onClose = () => {
            visible.value = false
        }
        // 确定删除
        const onConfirm = () => {
            visible.value = false
            // console.log( store.state.posts{[currenId]});
            store.dispatch('deletePost', currenId).then((rawDate: ResponseType<PostProps>) => {
                createMessage('删除成功 2秒后跳转专栏页', 'success')
                setTimeout(() => {
                    router.push({ name: 'column', params: { id: rawDate.data.column } })
                })
            })

            console.log('删除成功');
        }


        return {
            currentPost,
            currentImageUrl,
            currentHTML,
            showEditArea,
            deletefetch,
            visible,
            onClose,
            onConfirm
        }
    }
})
</script>

<style scoped>
.post-area {
    width: 100%;
    height: 200px;
}
</style>